<template>
    <div>
        <a-modal
            title="选择支线版本"
            centered
            v-model:visible="visible"
            :confirm-loading="loading"
            :width="600"
            okText="确认"
            @ok="handleSave"
            @cancel="handleCancel"
        >
            <a-form ref="ruleFormRef" layout="inline" :model="form" :rules="rules">
                <a-row>
                    <a-col :span="24">
                        <a-form-item label="PBI目录" name="catalogCode">
                            <span>
                                {{ pbiName }}
                            </span>
                        </a-form-item>
                    </a-col>
                    <a-col :span="24">
                        <a-form-item label="版本号" :span="24" name="verMgtId">
                            <div>
                                <a-select v-model:value="form.verMgtId" style="width: 120px; margin-right: 8px" allowClear>
                                    <a-select-option :key="item.id" v-for="item of versionNumberList">
                                        {{ item.versionNumber }}
                                    </a-select-option>
                                </a-select>
                            </div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { transformDataByFlatProperty } from '@/utils/tree';
import { deepClone } from '@/utils/util';
import { message } from 'ant-design-vue';
import { treeFilter } from '@/utils/tree';
import { defineComponent, reactive, ref, unref, toRefs, onDeactivated } from 'vue';
export default defineComponent({
    props: {
        lubiaoDetail: {
            type: Object,
            default: () => ({})
        }
    },
    emits: ['success'],
    setup(props, { emit }) {
        const ruleFormRef = ref<any>();
        const state = reactive<any>({
            form: {
                verMgtId: ''
            },
            versionNumberList: [],
            visible: false,
            loading: false,
            pbiName: '',
            rules: { verMgtId: [{ required: true, message: '请选择版本号', trigger: 'change', type: 'number' }] }
        });
        const open = () => {
            state.form.verMgtId = props.lubiaoDetail.verMgtId;
            getPbiTreeData();
            getVersionNumberList();
            state.visible = true;
        };
        const handleSave = async () => {
            const res = await unref(ruleFormRef).validate();
            if (res) {
                const query = {
                    ...props.lubiaoDetail,
                    ...state.form
                };
                const { success, errorMsg } = await api.signpostModel.save(query);
                if (success) {
                    emit('success');
                    state.visible = false;
                } else {
                    message.error(errorMsg);
                }
            }
        };
        // 获取所有pbi数据
        const getPbiTreeData = async () => {
            const query = {
                type: 2
            };
            const { success, moule } = await api.portalControlModel.getSystemProductCatalogTreeData(query);
            if (success) {
                if (moule) {
                    state.pbiTreeData = transformDataByFlatProperty(deepClone(JSON.parse(moule)));
                    const target = treeFilter(state.pbiTreeData, (node) => node.catalogCode === props.lubiaoDetail.catalogCode);
                    state.pbiName = getPbiName(target, '');
                }
            }
        };
        const getPbiName = (target, name) => {
            if (target && target.length) {
                if (name) {
                    name = `${name} / ${target[0].catalogName}`;
                } else {
                    name = target[0].catalogName;
                }
                return getPbiName(target[0].subNodes, name);
            }
            return name;
        };
        // 搜索系统下的所有可用的支线版本号
        const getVersionNumberList = async () => {
            let parentId = null;
            if (props.lubiaoDetail.pmpRegisteredProjectDTO) {
                if (
                    props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO &&
                    props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO.id
                ) {
                    parentId = props.lubiaoDetail.pmpRegisteredProjectDTO.pmpVersionManagementDTO.id;
                }
            }
            const { success, moule, errorMsg } = await api.versionControlModel.findSignPostUsableVersions({
                catalogCode: props.lubiaoDetail.catalogCode,
                id: state.form.verMgtId,
                parentId
            });
            if (success) {
                state.versionNumberList = [...moule];
            } else {
                message.error(errorMsg);
            }
        };
        const handleCancel = () => {
            state.visible = false;
        };

        // 销毁时关闭弹窗
        onDeactivated(() => {
            state.visible = false;
        });
        return {
            ruleFormRef,
            ...toRefs(state),
            open,
            handleSave,
            handleCancel
        };
    }
});
</script>

<style scoped>
</style>